<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 聊天助手</title>
    <!-- 添加 v-cloak 样式 -->
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
    <!-- 引入阿里云数字人SDK -->
    <script src="https://g.alicdn.com/code/npm/@alife/aliyun-avatar-sdk/1.0.20/index.js"></script>
    <!-- 保留原来的Bootstrap和图标引用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <!-- 主题样式 -->
    <link rel="stylesheet" href="css/deepseek-theme.css">
    <!-- 模块化后的CSS文件 -->
    <link rel="stylesheet" href="css/chat.css">
    <link rel="stylesheet" href="css/fileUpload.css">
    <link rel="stylesheet" href="css/voicePlayer.css">
    <link rel="stylesheet" href="css/voiceInput.css">
    <link rel="stylesheet" href="css/avatarPlayer.css">
    <!-- 添加语音高亮样式 -->
    <link rel="stylesheet" href="/css/voiceHighlighter.css">
    
    <!-- Markdown 解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    
    <!-- 代码高亮 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-java.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-sql.min.js"></script>
    <!-- 引入Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <div id="app" class="deepseek-container" v-cloak>
        <!-- 侧边栏 -->
        <div class="deepseek-sidebar">
            <div class="deepseek-new-chat" @click="createNewChat">
                <i class="bi bi-plus-lg"></i>&nbsp;新建聊天
            </div>
            <div class="deepseek-history">
                <!-- 历史记录功能可以在未来实现 -->
            </div>
        </div>
        <!-- 主聊天区域 -->
        <div class="deepseek-chat">
            <div class="deepseek-chat-header">
                AI 聊天助手
                <div class="voice-toggle">
                    <span>语音播报</span>
                    <label class="switch">
                        <input type="checkbox" v-model="voiceEnabled">
                        <span class="slider round"></span>
                    </label>
                </div>
                <!-- 添加数字人开关 -->
                <div class="avatar-toggle">
                    <span>数字人</span>
                    <label class="switch">
                        <input type="checkbox" v-model="avatarEnabled">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div id="chatBox" class="deepseek-messages">
                <!-- 欢迎消息 -->
                <div v-if="messages.length === 0" class="deepseek-welcome">
                    <h2>欢迎使用 AI 聊天助手</h2>
                    <p>请输入您的问题，我会尽力为您解答。</p>
                </div>
                <!-- 消息展示 -->
                <div v-for="message in messages" :key="message.id" 
                    :class="['deepseek-message', message.isUser ? 'deepseek-message-user' : 'deepseek-message-ai']"
                    :id="`message-${message.id}`">
                    <div v-html="message.content"></div>
                    
                    <!-- 消息操作按钮 - 完整的标签 -->
                    <div v-if="!message.isUser && !message.thinking" class="message-actions">
                        <i class="bi bi-hand-thumbs-up" @click="likeMessage(message)" :class="{ 'liked': message.liked }" title="点赞"></i>
                        <i class="bi bi-hand-thumbs-down" @click="dislikeMessage(message)" :class="{ 'disliked': message.disliked }" title="不喜欢"></i>
                        <i class="bi bi-clipboard" @click="copyMessage(message)" title="复制"></i>
                        <i class="bi bi-arrow-clockwise" @click="retryMessage(message)" title="重试"></i>
                        <i v-if="message.content.length > 500" class="bi bi-arrows-angle-expand" @click="expandMessage(message)" title="查看全文"></i>
                    </div>
                    <small class="timestamp">{{ new Date(message.timestamp).toLocaleString() }}</small>
                </div>
                <div ref="messagesEnd"></div>
            </div>
            <!-- 语音播报弹窗 -->
            <div class="voice-popup" v-if="isAppReady && showVoicePopup && voiceEnabled && isVoicePlaying">
                <div class="voice-animation" @click="toggleVoicePause" :class="{'paused': isPaused}">
                    <i class="bi" :class="isPaused ? 'bi-play-fill' : 'bi-volume-up'"></i>
                </div>
                <div class="voice-text">{{ isPaused ? "语音已暂停" : "正在播放语音..." }}</div>
                <div class="voice-status">{{voicePlayingText}}</div>
                <button class="voice-close-btn" @click="closeVoice" title="关闭语音">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <!-- 语音输入提示器 -->
            <div class="voice-input-indicator" v-if="isAppReady && showVoiceInput && isListening">
                <div class="voice-wave">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="voice-input-text">正在听您说话...</div>
            </div>
            <!-- 文件预览区域 - 放在输入框上方 -->
            <div class="file-previews-container" v-if="isAppReady && showFilePreview && uploadedFiles && uploadedFiles.length > 0">
                <!-- 当前选择的文件 -->
                <div class="file-preview" v-for="file in uploadedFiles" :key="file.id">
                    <div class="file-info">
                        <i class="bi bi-file-earmark"></i>
                        <span class="file-name">{{ file.name }}</span>
                        <span class="file-size">({{ formatFileSize(file.size) }})</span>
                        <span class="uploading-indicator" v-if="file.uploadingFile">
                            <span class="spinner-border spinner-border-sm" role="status"></span>
                            上传中...
                        </span>
                    </div>
                    <button class="remove-file" @click="removeUploadedFile(file.id)" title="移除文件">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            </div>
            <!-- 输入区域 -->
            <div class="deepseek-input-container">
                <textarea
                    v-model="currentMessage" 
                    @keydown="handleKeyDown"
                    class="deepseek-textarea" 
                    placeholder="输入您的问题..." 
                    :disabled="isProcessing">
                </textarea>
                <div class="deepseek-input-actions">
                    <!-- 语音输入按钮 -->
                    <button class="deepseek-voice-input" @click="toggleVoiceInput" title="语音输入">
                        <i class="bi" :class="isListening ? 'bi-mic-fill' : 'bi-mic'"></i>
                    </button>
                    <!-- 文件上传按钮 -->
                    <label class="deepseek-file-upload" :class="{ 'disabled': isProcessing || (FileUploader && FileUploader.data.uploadingFile) }">
                        <input type="file" @change="handleFileUpload" :disabled="isProcessing || (FileUploader && FileUploader.data.uploadingFile)" />
                        <i class="bi bi-paperclip" v-if="!(FileUploader && FileUploader.data.uploadingFile)"></i>
                        <span class="spinner-border spinner-border-sm" v-else></span>
                    </label>
                    <button 
                        class="deepseek-send-button" 
                        @click="sendMessage" 
                        :disabled="isProcessing || (!currentMessage.trim() && (!FileUploader || FileUploader.data.uploadedFiles.length === 0))">
                        <i class="bi bi-send"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- Vue 框架 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
    <!-- FLV.js 用于视频播放 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <!-- 我们的模块 - 确保先加载模块，后加载主应用 -->
    <script src="js/avatarPlayer.js"></script>
    <!-- 我们的模块 - 确保先加载模块，后加载主应用 -->
    <script src="js/voiceHighlighter.js"></script>
    <script src="js/fileUploader.js"></script>
    <script src="js/voicePlayer.js"></script>
    <script src="js/voiceInput.js"></script>
    <!-- 主应用 -->
    <script src="js/chat.js"></script>
</body>
</html>